<html>
  <style>
    body,
    html {
      margin: 0px;
      border: 0px;
    }
    #main {
      position: absolute;
      width: calc(50vw + 245px);
      height: 90vh;
      margin-left: calc(50vw - 245px);
      margin-top: calc(10vh);
    }
    #clock_container {
      z-index: 1;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background-color: antiquewhite;
      background-position: center 30%;
    }

    #img_container {
      z-index: 5;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      position: absolute;
      top: 0px;
      left: 0px;
      background-image: url('page1.png');
      background-position: center 30%;
    }
    #clock_center {
      z-index: 10;
      position: absolute;
      left: 245px;
      top: 245px;
      width: 10px;
      height: 10px;
      background-color: black;
      border-radius: 50%;
    }

    #zero_min_mark_container {
      z-index: 8;
      position: absolute;
      left: 240px;
      top: 0px;
      width: 20px;
      height: 500px;
      background-color: rgba(5, 5, 5, 0);
    }

    #five_min_mark_container {
      z-index: 8;
      position: absolute;
      left: 245px;
      top: 0px;
      width: 10px;
      height: 500px;
      background-color: rgba(5, 5, 5, 0);
      transform: rotate(30deg);
    }

    #ten_min_mark_container {
      z-index: 8;
      position: absolute;
      left: 245px;
      top: 0px;
      width: 10px;
      height: 500px;
      background-color: rgba(5, 5, 5, 0);
      transform: rotate(60deg);
    }
    #fifteen_min_mark_container {
      z-index: 8;
      position: absolute;
      left: 240px;
      top: 0px;
      width: 20px;
      height: 500px;
      background-color: rgba(5, 5, 5, 0);
      transform: rotate(90deg);
    }

    #fifty_min_mark_container {
      z-index: 8;
      position: absolute;
      left: 245px;
      top: 0px;
      width: 10px;
      height: 500px;
      background-color: rgba(5, 5, 5, 0);
      transform: rotate(-60deg);
    }

    #fifty_five_min_mark_container {
      z-index: 8;
      position: absolute;
      left: 245px;
      top: 0px;
      width: 10px;
      height: 500px;
      background-color: rgba(5, 5, 5, 0);
      transform: rotate(-30deg);
    }

    .top-mark {
      position: absolute;
      top: 0px;
      width: 100%;
      height: 15px;
      background-color: black;
    }

    .bottom-mark {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 15px;
      background-color: black;
    }
    #hour_container {
      z-index: 4;
      position: absolute;
      width: 6px;
      height: 500px;
      opacity: 1;
      left: 247px;
      top: 0px;
      transform: rotate(53deg);
    }
    #hour_container > #hour_top {
      height: 50%;
    }
    #hour_container > #hour_bottom {
      height: 50%;
    }
    #hour_top_hide {
      height: 35%;
      position: relative;
    }
    #hour_top_show {
      background-color: rgb(254, 178, 255);
      height: 65%;
      position: relative;
      border-radius: 10px;
    }
    #hour_hand_1 {
      background-color: rgb(254, 178, 255);
      height: 10%;
      transform: rotate(30deg);
      left: 6px;
      top: 0px;
      position: absolute;
      width: 6px;
      border-radius: 10px;
    }
    #hour_hand_2 {
      background-color: rgb(254, 178, 255);
      height: 10%;
      transform: rotate(-30deg);
      left: -6px;
      position: absolute;
      top: 0px;
      width: 6px;
      border-radius: 10px;
    }

    #min_container {
      z-index: 12;
      position: absolute;
      width: 6px;
      height: 500px;
      opacity: 1;
      left: 247px;
      top: 0px;
      transform: rotate(78deg);
    }
    #min_container > #min_top {
      height: 50%;
    }
    #min_container > #min_bottom {
      height: 50%;
    }
    #min_top_hide {
      height: 25%;
      position: relative;
    }
    #min_top_show {
      background-color: rgb(254, 178, 255);
      height: 75%;
      position: relative;
      border-radius: 10px;
    }
    #min_hand_1 {
      background-color: rgb(254, 178, 255);
      height: 10%;
      transform: rotate(30deg);
      left: 6px;
      top: 0px;
      position: absolute;
      width: 6px;
      border-radius: 10px;
    }
    #min_hand_2 {
      background-color: rgb(254, 178, 255);
      height: 10%;
      transform: rotate(-30deg);
      left: -6px;
      position: absolute;
      top: 0px;
      width: 6px;
      border-radius: 10px;
    }
  </style>

  <body>
    <div id="main">
      <div id="clock_container"></div>
      <div id="img_container"></div>
      <div id="clock_center"></div>
      <div id="zero_min_mark_container">
        <div class="top-mark"></div>
        <div class="bottom-mark"></div>
      </div>

      <div id="five_min_mark_container">
        <div class="top-mark"></div>
        <div class="bottom-mark"></div>
      </div>
      <div id="ten_min_mark_container">
        <div class="top-mark"></div>
        <div class="bottom-mark"></div>
      </div>
      <div id="fifteen_min_mark_container">
        <div class="top-mark"></div>
        <div class="bottom-mark"></div>
      </div>
      <div id="fifty_min_mark_container">
        <div class="top-mark"></div>
        <div class="bottom-mark"></div>
      </div>
      <div id="fifty_five_min_mark_container">
        <div class="top-mark"></div>
        <div class="bottom-mark"></div>
      </div>

      <div id="hour_container">
        <div id="hour_top">
          <div id="hour_top_hide"></div>
          <div id="hour_top_show">
            <div id="hour_hand_1"></div>
            <div id="hour_hand_2"></div>
            <div id="hour_arm"></div>
            <div></div>
          </div>
        </div>
        <div id="hour_bottom"></div>
      </div>

      <div id="min_container">
        <div id="min_top">
          <div id="min_top_hide"></div>
          <div id="min_top_show">
            <div id="min_hand_1"></div>
            <div id="min_hand_2"></div>
            <div id="min_arm"></div>
            <div></div>
          </div>
        </div>
        <div id="min_bottom"></div>
      </div>
    </div>
  </body>
</html>
<script>
  function refleshTime() {
    var date = new Date()
    var hour = date.getHours()
    var min = date.getMinutes()
    var hourAngle = ((hour % 12) / 12) * 360 + (min / 60 / 12) * 130
    var minAngle = (min / 60) * 360
    console.log(hourAngle, minAngle)
    document.getElementById('hour_container').style.transform =
      'rotate(' + hourAngle + 'deg)'
    document.getElementById('min_container').style.transform =
      'rotate(' + minAngle + 'deg)'
  }
  refleshTime()
  setInterval(refleshTime, 10000)
</script>
